import React from 'react';
import styles from './index.less';
import NavLink from 'umi/navlink';
import { ActivityIndicator } from 'antd-mobile';

export default class Songs extends React.Component {
  state = {
    list: [],
    name: this.props.location.pathname.slice(20).split('/'),
    imgu: [],
    id: this.props.location.pathname
      .slice(20)
      .split('/')[7]
      .replace(/wma/g, 'mp3'),
    animating: true,
  };

  showToast = () => {
    this.setState({ animating: !this.state.animating });
    this.closeTimer = setTimeout(() => {
      this.setState({ animating: !this.state.animating });
    }, 1000);
    console.log(this.state.theText);
  };

  renderUserMessage() {
    if (this.state.list != '') {
      return (
        <ul>
          {this.state.list.map((item, index) => {
            return (
              <NavLink
                onClick={window.location.reload}
                to={`/dynamic-home/$song/${item.song_id}
                  /${item.singer_id}/${item.song_path}`}
                exact
                className={styles.list}
                key={index}
              >
                <div className={styles.img}>
                  <img src={item.album_cover} />
                </div>
                <div className={styles.box}>
                  <div className={styles.song}>{item.song_name}</div>
                  <div className={styles.name}>{item.singer_name}</div>
                </div>
              </NavLink>
            );
          })}
        </ul>
      );
    } else {
      return (
        <ul>
          <li>
            <h2>没有更多了</h2>
          </li>
        </ul>
      );
    }
  }
  render() {
    return (
      <div className={styles.all}>
        <div className={styles.listen}>
          <h1>{this.state.imgu ? this.state.imgu.song_name : '歌名暂无'}</h1>
          <p>{this.state.imgu ? this.state.imgu.singer_name : '姓名暂无'}</p>
          <div className={styles.img}>
            <img
              src={
                this.state.imgu
                  ? this.state.imgu.album_cover
                  : 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1587091527,1030543055&fm=26&gp=0.jpg'
              }
            />
          </div>
          <marquee behavior="scroll" direction="up" scrollamount="1000" height="30px" width="50px">
            {}
          </marquee>
          <div className={styles.mus}>
            <audio
              controls
              src={`https://h5.1ting.com/file?url=%2F${this.state.name[3]}%2F${
                this.state.name[4]
              }%2F${this.state.name[5]}%2F${this.state.name[6]}%2F${this.state.id}`}
            />
          </div>
        </div>
        <div className={styles.thelist}>
          <div className="toast-example">
            <ActivityIndicator toast text="Loading..." animating={this.state.animating} />
          </div>
          <p>猜你喜欢</p>
          {this.renderUserMessage()}
        </div>
      </div>
    );
  }

  componentDidMount() {
    let mor = this.state.name[0].replace(/\s+/g, '');
    fetch(`/api/client/guess_songs/${this.state.name[1]}.json`)
      .then(response => response.json())
      .then(data => {
        // console.log(data.items);
        this.setState({
          list: data.items,
          imgu: data.items.filter(item => item.song_id == mor)[0],
          animating: !this.state.animating,
        });
      });
  }
}
